import defaultSettings from '@/settings'
import Cookies from 'js-cookie'
const THEME_KEY = 'theme-color'
const THEME_DEFAULT_COLOR = '#517cf2'

const { showSettings, fixedHeader, sidebarLogo } = defaultSettings

const state = {
  showSettings: showSettings,
  fixedHeader: fixedHeader,
  sidebarLogo: sidebarLogo,
  theme: Cookies.get(THEME_KEY) || THEME_DEFAULT_COLOR
}

const mutations = {
  // 万能的mutation
  // this.$store.commit('CHANGE_SETTING', {key:xxx, value:xxx})
  // this.$store.commit('CHANGE_SETTING', {key:'theme', value:'#8df'})
  // this.$store.commit('CHANGE_SETTING', {key:'sidebarLogo', value:xxx})
  CHANGE_SETTING: (state, { key, value }) => {
    // eslint-disable-next-line no-prototype-builtins
    if (state.hasOwnProperty(key)) {
      state[key] = value
    }

    if (key === 'theme') {
      // 发现你修改的是theme  本地存储
      // cookie   js-cookie
      Cookies.set(THEME_KEY, value)
    }
  },

  resetTheme(state) {
    // 重置成默认颜色
    state.theme = THEME_DEFAULT_COLOR
    // cookies中也要移出
    Cookies.remove(THEME_KEY)
  }
}

const actions = {
  // this.$store.dispatch('changeSetting', {key:'theme', value:'#8df'})
  changeSetting({ commit }, data) {
    commit('CHANGE_SETTING', data)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

